<template>
  <el-card class="form-container">
    <el-steps :active="active" finish-status="success">
      <el-step title="填写商品信息"></el-step>
      <el-step title="填写商品促销"></el-step>
      <el-step title="填写商品属性"></el-step>
    </el-steps>
    <ProductInfoDetail v-show="showStatus[0]" @nextStep="nextStep" :value="productObj" />
    <ProductSaleDetail v-show="showStatus[1]" @nextStep="nextStep" @prevStep="prevStep" :value="productObj" />
    <ProductAttrDetail v-show="showStatus[2]"  @prevStep="prevStep" @finishCommit="finishCommit" :value="productObj" />
  </el-card>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
import ProductInfoDetail from "./ProductInfoDetail.vue";
import ProductAttrDetail from "./ProductAttrDetail.vue";
import ProductSaleDetail from "./ProductSaleDetail.vue";
// 商品的原始数据模型
const defaultProductObj = {
// 商品分类
  productCategoryId: null,
  productCategoryName: '',
  name: '', // 商品名称
  subTitle: '',
  productIntro: '', // 商品介绍
  productSn: '', // 商品货号
  originalPrice: null, // 市场价
  price: null, // 商品售价
  store: null, // 商品库存
  sort: null,
  giftScore: null,
  giftGrow: null,
  publishStatus: 1, // 是否上架
  newsStatus: 1,
  recommendStatus: 1,
  serviceIds: '', // 服务列表
  netContent: '', // 净含量
  storageCondition: '', // 储存条件
  quality: '', // 保质期
  reductionType: 0, // 优惠选项
  reductionPrice: 0, // 促销价格
  reductionStartTime: null, //特惠开始时间
  reductionEndTime: null, //特惠结束时间
// 会员体系价格
  memberPriceList: [
    {
      memberLevelId: 1,
      memberLevelName: '黄金会员',
      memberLevelPrice: null
    },
    {
      memberLevelId: 2,
      memberLevelName: '白金会员',
      memberLevelPrice: null
    },{
      memberLevelId: 3,
      memberLevelName: '钻石会员',
      memberLevelPrice: null
    }
  ],
// 首页秒杀
  productHomeKillList: [
    {count: 0, discount: 0}
  ],
// 商品主图片
  pic: '',
// 商品图片集
  albumPics: '',
// 详情页
  detailHtml: ''
};
export default {
  name: "ProductDetail",
  components: {
    ProductInfoDetail,
    ProductAttrDetail,
    ProductSaleDetail,
  },
  setup() {
    const state = reactive({
      active: 0,
      showStatus: [true, false, false], // 控制三个不同组件的显示与隐藏
      productObj: {...defaultProductObj},
    })

    onMounted(() => {
      console.log(state.productObj)
    })

    // 隐藏所有组件
    const hideAll = () => {
      for (let i = 0; i < state.showStatus.length; i++) {
        state.showStatus[i] = false;
      }
    }

    // 上一步
    const prevStep = () => {
      if (state.active > 0 && state.active < state.showStatus.length) {
        state.active--;
        hideAll();
        state.showStatus[state.active] = true;
      }
    }
    // 下一步
    const nextStep = () => {
      if (state.active < state.showStatus.length - 1) {
        state.active++;
        hideAll();
        state.showStatus[state.active] = true;
      }
    }
    // 提交
    const finishCommit = () => {
      alert(2)
    }
    return {
      ...toRefs(state),
      prevStep,
      nextStep,
      finishCommit,
    };
  }
}
</script>

<style scoped lang="less">
  .form-container {
    width: 75%;
    margin: 0 auto;
  }
</style>